$(function () {
  $('#signature-result').click(function(){
     showCanvas();
  });
});
//显示签名画布
function showCanvas() {
  var _html = '<div class="szktor-dialog-mask">\
              <div class="szktor-dialog-box">\
                  <span class="close-szktor-dialog-box" onclick="closeCanvas();">✕</span>\
                  <p class="signature-title">请在下方签名</p>\
                  <div class="js-signature" id="canvas-signature" \
                      data-width="600"\
                      data-height="150"\
                      data-border="1px dotted #ff2c02"\
                      data-background="#ffffff"\
                      data-line-color="#000000"\
                      data-auto-fit="true">\
                  </div>\
                  <div class="signature-btn">\
                    <a class="btnstyle yellow-btn" onclick="clearnCanvas();">清除</a><a class="btnstyle blue-btn" id="confimCanvasBtn">确定</a>\
                  </div>\
              </div>';
  $('.szktor-dialog-mask').remove();
  $('.szktor-dialog-box').remove();
  $('body').append(_html);
  $('.js-signature').jqSignature();
  document.getElementById('canvas-signature').addEventListener('click', function() {},{ passive: false });
  $('.js-signature').on('jq.signature.changed', function() {
    $('#confimCanvasBtn').attr('onclick','saveSignature();');
  });
}
//关闭签名画布
function closeCanvas() {
  $('.szktor-dialog-mask').remove();
  $('.szktor-dialog-box').remove();
  $('#signature-result').empty();
  $('#signature-result').data('imgurl','');
}
//清除画布
function clearnCanvas() {
  $('#signature-result').empty();
  $('#signature-result').data('imgurl','');
  $('.js-signature').jqSignature('clearCanvas');
  $('#confimCanvasBtn').attr('onclick','');
}
//保存签名
function saveSignature() {
  $('#signature-result').empty();
  $('#signature-result').data('imgurl','');
  var dataUrl = $('.js-signature').jqSignature('getDataURL');
  $('#signature-result').html('<img src="'+dataUrl+'"/>');
  $('#signature-result').data('imgurl',dataUrl);
  $('.szktor-dialog-mask').remove();
  $('.szktor-dialog-box').remove();
}
//获取已签名的图片URL
function getSignatureImgUrl() {
  return $.trim($('#signature-result').data('imgurl'));
}
